<template>
  <div>
    <ul class="top">
          <router-link to="/home"><li class="li"><a class="active" href="#home">主页</a></li></router-link>
          <router-link to="/Home2"><li class="li"><a href="#news">新闻</a></li></router-link>
          <li class="li"><a href="#contact">联系</a></li>
          <router-link to="/denglu"><li style="float: right" class="li"><a href="#about">注销登录</a></li></router-link>
        </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style land="less"  scoped>
*{
  margin: 0;
  padding: 0;
}
.top {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.li {
    float: left;
    border-right:1px solid #bbb;
}

.li:last-child {
    border-right: none;
}

.li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
#app{
  width: 100vw;
  height: 100vh;
background: url(../assets/d7a82a11a801c41747b19584a0dcf26.png);
overflow: hidden;
background-size:cover;

}
</style>